<template>
  <el-dialog
    :title="!dataForm.id ? $t('sysManagement.add') : $t('sysManagement.modify')"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-form
      @submit.native.prevent
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      size="small"
      @keyup.enter.native="dataFormSubmit()"
      :label-width="this.$i18n.t('language') === 'English' ? '155px' : '120px'"
    >
      <el-form-item :label="$t('publics.name')" prop="name">
        <el-input
          v-model="dataForm.name"
          maxlength="30"
          size="small"
          show-word-limit
          :placeholder="$t('publics.name')"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item :label="$t('sys.level')" prop="level">
        <el-input
          v-model="dataForm.level"
          :placeholder="$t('sys.level')"
          maxlength="100"
          size="small"
          show-word-limit
        ></el-input>
      </el-form-item> -->

      <el-form-item :label="$t('sys.orderNum')" prop="orderNum">
        <el-input-number
          class="input-num"
          v-model="dataForm.orderNum"
          controls-position="right"
          size="small"
          :min="0"
          :max="100000000"
          :label="this.$i18n.t('hotSearch.seq')"
        ></el-input-number>
      </el-form-item>

      <!-- <el-form-item :label="$t('sys.floorNum')" prop="floorNum">
        <el-input
          v-model="dataForm.floorNum"
          maxlength="50"
          size="small"
          show-word-limit
          :placeholder="$t('sys.floorNum')"
        ></el-input>
      </el-form-item> -->
      <el-form-item :label="$t('sys.parentId')" v-if="!dataForm.id">
        <el-cascader
          expand-trigger="hover"
          :options="menuList"
          :props="menuListTreeProps"
          change-on-select
          :clearable="true"
          size="small"
          v-model="selectedMenu"
          @change="handleSelectMenuChange"
        ></el-cascader>
      </el-form-item>

      <el-form-item :label="$t('sys.disabled')" prop="disabled">
        <el-select
          size="small"
          v-model="dataForm.disabled"
          @change="
            () => {
              isRef = true;
            }
          "
          :placeholder="$t('user.pleaseSelect')"
        >
          <el-option
            v-for="item in disabled"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item
        :label="$t('sys.securityCheckArea')"
        prop="securityCheckArea"
      >
        <el-select
          size="small"
          v-model="dataForm.securityCheckArea"
          @change="
            () => {
              isRef = true;
            }
          "
          :placeholder="$t('user.pleaseSelect')"
        >
          <el-option
            v-for="item in disabled"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="close()">{{ $t("coupon.cancel") }}</div>
      <div class="default-btn primary-btn" @click="dataFormSubmit()">
        {{ $t("coupon.confirm") }}
      </div>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      var validateName = (rule, value, callback) => {
        if (!value.toString().trim()) {
          callback(new Error(this.$i18n.t("sys.menuNameNoNull")));
        } else {
          callback();
        }
      };
      return {
        visible: false,
        isRef: false,
        dataForm: {
          id: 0,
          name: "",
          parentId: 0,
          disabled: 0,
          level: "", //层级
          // floorNum: "", //楼层数字
          orderNum: 0, //排序号
          // securityCheckArea: null, //是否包含安检区
        },
        dataRule: {
          name: [
            {
              required: true,
              message: this.$i18n.t("sys.menuNameNoNull"),
              trigger: "blur",
            },
            { validator: validateName, required: true, trigger: "blur" },
          ],
          // securityCheckArea: [
          //   {
          //     required: true,
          //     message: this.$i18n.t("sys.menuNameNoNull"),
          //     trigger: "blur",
          //   },
          // ],
          // floorNum: [
          //   {
          //     required: true,
          //     message: this.$i18n.t("sys.menuNameNoNull"),
          //     trigger: "blur",
          //   },
          // ],
          orderNum: [
            {
              required: true,
              message: this.$i18n.t("sys.menuNameNoNull"),
              trigger: "blur",
            },
          ],
        },
        isSubmit: false,
        menuList: [],
        selectedMenu: [],
        menuListTreeProps: {
          value: "id",
          label: "name",
        },
        disabled: [
          {
            label: this.$i18n.t("sys.no"),
            value: 0,
          },
          {
            label: this.$i18n.t("sys.yes"),
            value: 1,
          },
        ],
      };
    },
    created() {},
    methods: {
      init(id) {
        this.dataForm.id = id || 0;
        this.isSubmit = false;
        this.$http({
          url: this.$http.adornUrl("/admin/platform/airportStation/treeV2"),
          method: "get",
          params: this.$http.adornParams(),
        })
          .then(({ data }) => {
            function disableNodeById(nodes, targetId) {
              for (let node of nodes) {
                if (node.id == targetId) {
                  node.disabled = true;
                  disableChildren(node.children);
                  break;
                }
                if (node.children) {
                  disableNodeById(node.children, targetId);
                }
              }
            }

            function disableChildren(children) {
              if (!children) return;
              for (let child of children) {
                child.disabled = true;
                disableChildren(child.children);
              }
            }
            disableNodeById(data, this.dataForm.id);
            this.menuList = data;
          })
          .then(() => {
            this.visible = true;
            this.$nextTick(() => {
              this.$refs["dataForm"].resetFields();
            });
          })
          .then(() => {
            if (this.dataForm.id) {
              // 修改
              this.$http({
                url: this.$http.adornUrl(
                  `/admin/platform/airportStation/${this.dataForm.id}`
                ),
                method: "get",
                params: this.$http.adornParams(),
              }).then(({ data }) => {
                this.dataForm.id = data.id;
                this.dataForm.name = data.name;
                this.dataForm.parentId = data.parentId;
                this.dataForm.disabled = data.disabled ? 1 : 0;
                // this.dataForm.securityCheckArea = data.securityCheckArea ? 1 : 0;
                this.dataForm.level = data.level;
                // this.dataForm.floorNum = data.floorNum;
                this.dataForm.orderNum = data.orderNum;
                this.selectedMenu = data.parentTreeIds;
              });
            }
          });
      },
      handleSelectMenuChange(val) {
        this.dataForm.parentId = val[val.length - 1];
      },
      clear() {
        this.dataForm = {
          id: 0,
          name: "",
          parentId: 0,
          disabled: 0,
          level: "", //楼层
          // floorNum: "", //楼层数字
          orderNum: 0, //排序号
          // securityCheckArea: null, //是否包含安检区
        };
        this.selectedMenu = [];
      },
      // 图标选中
      iconActiveHandle(iconName) {
        this.dataForm.icon = iconName;
      },
      beforeClose(done) {
        this.clear();
        done();
      },
      close() {
        this.clear();
        this.visible = false;
      },
      // 表单提交
      dataFormSubmit() {
        console.log("this.dataForm", this.dataForm);
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            if (this.isSubmit) {
              return false;
            }
            this.isSubmit = true;
            this.$http({
              url: this.$http.adornUrl(`/admin/platform/airportStation`),
              method: this.dataForm.id ? "put" : "post",
              data: this.$http.adornData({
                id: this.dataForm.id || undefined,
                name: this.dataForm.name,
                parentId: this.dataForm.parentId,
                disabled: !!this.dataForm.disabled,
                // securityCheckArea: !!this.dataForm.securityCheckArea,
                level: this.dataForm.level,
                // floorNum: this.dataForm.floorNum,
                orderNum: this.dataForm.orderNum,
              }),
            })
              .then(({ data }) => {
                this.$message({
                  message: this.$i18n.t("publics.operation"),
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit("refreshDataList");
                    this.clear();
                    if (this.isRef) {
                      // location.reload()
                    }
                  },
                });
              })
              .catch((e) => {
                this.isSubmit = false;
              });
          }
        });
      },
    },
  };
</script>

<style lang="scss">
  .mod-menu {
    .menu-list__input,
    .icon-list__input {
      > .el-input__inner {
        cursor: pointer;
      }
    }
    &__icon-popover {
      max-width: 420px;
    }
    &__icon-list {
      max-height: 280px;
      padding: 0;
      margin: -8px 0 0 -8px;
      > .el-button {
        padding: 8px;
        margin: 8px 0 0 8px;
        > span {
          display: flex;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          font-size: 18px;
        }
      }
    }
    .icon-list__tips {
      font-size: 18px;
      text-align: center;
      color: #e6a23c;
      cursor: pointer;
    }
  }
</style>
